<template>
  <div class="toast-wraper">
    <!-- <van-loading size="24px" vertical="vertical" v-show="showloading">
      <p>{{ message }}</p>
    </van-loading> -->
    <div v-show="showloading" class="showloading">
      <img class="toastImg" :src="require('@/assets/icon/loadingIcon.gif')" alt="">
      <p>{{ message }}</p>
    </div>
    <p v-show="!showloading">{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: "toast",
  props: {
    message: {
      type: String,
      default: "加载中...",
    },
    vertical: {
      type: Boolean,
      default: true,
    },
    showloading: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.toast-wraper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  .showloading{
    min-width: 50px;
    height: 50px;
    text-align: center;
  }
  .toastImg{
    width: 24px;
    height: 24px;
  }
  p {
    margin: 0 auto;
    min-width: 70%;
    font-size: 12px;
    text-align: center;
    color: #969799;
    word-break: break-all;
  }
}
</style>
<style>
/* 全局样式 专用于发送时候报错弹窗 */
/* .errSelfDialog /deep/ .van-dialog__confirm,
 .van-dialog__confirm:active {
  color: #00c00e !important;
} */
.errSelfDialog {
  border-radius: 4px !important;
  width: 300px !important;
  /* height: 148px!important; */
}
</style>
